import React, { useEffect, useState } from 'react';
import { getBannerList, deleteBanner } from '../../api/banner';
import { Table,Image, Button, Popconfirm, message } from 'antd';

const Index = () => {
  const [bannerList, setBannerList] = useState()

  useEffect(()=>{
    // 获取轮播图列表
    getBannerList().then(res => {
      // console.log(res.data);
      setBannerList(res.data)
    })

  }, [])
  const columns = [
    {
      title: '序号',
      render: (t,r,i)=>{
        return (<span>{i + 1}</span>)
      }
    },
    {
      title: '图片',
      render(t,r,i){
        return (<Image src={r.img} height={60} ></Image>)
      }
    },
    {
      title: '链接',
      dataIndex: 'link'
    },
    {
      title: '提示',
      dataIndex: 'alt'
    },
    {
      title: '操作',
      render(text){

        return (<Popconfirm
        cancelText='不删除'
        okText='确定删除'
        title='你确定要删除吗？'
        onConfirm={()=>{
          //
          deleteBanner({bannerid: text.bannerid}).then(res => {
            console.log(res);
            if(res.code === '200'){
              message.success('删除轮播图数据成功!')
              // 获取轮播图列表
              getBannerList().then(res => {
                // console.log(res.data);
                setBannerList(res.data)
              })
            }else {
              message.error('删除轮播图数据失败，请稍后再试!')
            }
          })
        }}
        >
          <Button>删除</Button>
        </Popconfirm>)

      }
    }
  ]
  return (
    <div>
      轮播图列表

      <Table
      rowKey='bannerid'
      dataSource={bannerList}
      columns={columns}
      pagination={{
        pageSize: 5
      }}
      />
    </div>
  );
};

export default Index;
